<template>
  <div class='main-container'>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的合同</el-breadcrumb-item>
    </el-breadcrumb>
    <h4>
      我的合同
    </h4>
    <el-row>
      <el-col class='data-container'>
        <li @click="jumpToFilter('0')">
          <i class='el-icon-edit' style='color:#E6A23C;'></i>
          <br>
          <p>{{requireSignalCount}}</p>
          <h5>待签署</h5>
        </li>
        <li @click="jumpToFilter('1')">
          <i class='el-icon-document-checked' style='color:#409EFF'></i>
          <br>
          <p>{{signedCount}}</p>
          <h5>已签署</h5>
        </li >
        <li @click="jumpToFilter('2')">
          <i class='el-icon-time' style='color:#909399'></i>
          <br>
          <p>{{expiredCount}}</p>
          <h5>已过期</h5>
        </li>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <h4>
      最近文件
    </h4>
    <!-- 表格 -->
    <el-table :data="contractsList" style="width: 100%" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="contractName" label="合同名称" ></el-table-column>
      <el-table-column prop="launchUser" label="发起人" width='70'></el-table-column>
      <el-table-column prop="receiveUser" label="签署人" width='70'></el-table-column>
      <el-table-column prop="launchTime" label="签署发起时间">
        <template slot-scope='scope'>
          {{scope.row.launchTime|dateFormat}}
        </template>
      </el-table-column>
      <el-table-column prop="ddl" label="签署截止时间" >
        <template slot-scope='scope'>
          {{scope.row.ddl|dateFormat}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" >
        <template slot-scope="scope">
          <el-tag
            :type="getStatus(scope.row.status).color"
            disable-transitions>{{getStatus(scope.row.status).text}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="130">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===0" type="success" size="mini" @click="openContractView(scope.row.contractId,1)" class="el-icon-edit"></el-button>
          <el-button type="primary" size="mini" @click="openContractView(scope.row.contractId,1)" class="el-icon-search"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'StaffGeneral',
    data(){
      return{
        requireSignalCount:0,
        signedCount:0,
        expiredCount:0,
        contractsList:[]
      }
    },
    created(){
      this.getContactsList()
    },
    methods:{
      getContactsList:async function(){
        const {data:res}=await this.$http.post('/contract/getAllContracts')
        if(res.code!==0){
          return this.$message.error("获取失败")
        }
        this.requireSignalCount=res.data.total1
        this.signedCount=res.data.total2
        this.expiredCount=res.data.total3
        this.contractsList=res.data.data
        this.$message.success("获取合同列表成功")
        window.sessionStorage.setItem('contractsList', JSON.stringify(this.contractsList))
      },
      getStatus(val){
        let statusMap = {
          '0':{color:'warning',text:'待签署'},
          '1':{color:'success',text:'已签署'},
          '2':{color:'danger',text:'已过期'},
          '3':{color:'danger',text:'已解约'}
        }
        return statusMap[val]
      },
      jumpToFilter(val){
        this.$router.push(`/staffFilter/${val}`)
      },
      openContractView(val,isEdit){
        this.$router.push(`/contractView/${val}/${isEdit}/0`)
      }
    }
  }
</script>

<style lang="less" scoped>
  .main-container{
    padding: 10px 20px;
    h4{
      color: gray;
      font-size:20px;
      font-weight: normal
    }
  }
  .data-container{
  display: flex;
  width:100%;
  li{
    padding: 30px 30px 0;
    width:90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i{
      width:32px;
      height:32px;
      font-size: 32px;
    }
    p{
      font-size: 32px;
      margin: 0;
    }
    h5{
      font-weight: 400;
      color: darkgray;
      font-size: 16px;
    }
  }
}
</style>
